<template>
    <div>
        <a-button type="primary" @click="handClick">隐患分析导出</a-button>
        <a-modal :visible="visible" title="QQCTN隐患分析导出" @cancel="handleCancel" @ok="handleOk"
            :confirmLoading="okLoading">
            <div class="modalContentWrap">
                <a-range-picker :value="formatDate(time)" @change="onChange" style="width: 100%;" />
            </div>
        </a-modal>
    </div>
</template>

<script>
import moment from 'moment';
import qs from "qs";

export default {
    name: 'ExportBtn',
    data() {
        return {
            visible: false,
            time: [],
            okLoading: false,
        }
    },
    methods: {
        handClick() {
            this.isRest();
            this.visible = true;
        },
        handleCancel() {
            this.visible = false;
        },
        onChange(date, dateString) {
            this.time = dateString;
        },
        handleOk() {
            this.quest();
        },
        isRest() {
            this.time = [];
            this.okLoading = false;
        },
        formatDate(e) {
            let res = [];
            if (Array.isArray(e) && e.length > 0) {
                res[0] = moment(e[0], 'YYYY-MM-DD');
                res[1] = moment(e[1], 'YYYY-MM-DD');
            } else {
            }
            return res;
        },
        quest() {
            if (this.time.length == 0) {
                this.$message.error({
                    content: '请选择日期',
                    duration: 2.5,
                });
                return;
            }
            this.okLoading = true;
            let params = {
                startTime: this.time[0],
                endTime: this.time[1],
            };

            let str = qs.stringify(params);
            const link = document.createElement("a");
            link.style.display = "none";
            // 兼容不同浏览器的URL对象
            const url = window.URL || window.webkitURL || window.moxURL;
            link.href = `${this.$qqctnHazardAnalysis}?${str}`;
            link.setAttribute("download", `隐患分析导出.docx`);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            url.revokeObjectURL(link.href);
            setTimeout(() => {
                this.okLoading = false;
                this.isRest();
                this.handleCancel();
            }, 1000)
        }
    }
}
</script>

<style lang="less" scoped>
.modalContentWrap {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>